<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
    <title>区块头条</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.color.min.js" type="text/javascript"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!--自定义字体-->
    <link rel="stylesheet" href="css/font.css">

    <link rel="stylesheet/less" type="text/css" href="css/base.less" />
    <link rel="stylesheet" type="text/css" href="css/personal.css">

    <script src="js/less.js"></script>
    <script src="js/qs.js"></script>
    <script src="js/base.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/html-params.js"></script>
    <script src="js/vue.js"></script>

    <script src="js/page/personal.js"></script>

    <!--各种图-->
    <script type="text/javascript" src="js/echart/echarts.min.js"></script>
    <!--加载Axios-->
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="header" v-cloak="">
    <header-content></header-content>
</div>

<div id="main">
    <div class="content">
        <!--头像和菜单-->
        <div id="my-info" v-cloak="">
            <personal-menu-content :is-one="true"></personal-menu-content>
        </div>

        <!--具体内容显示-->
        <div id="info-list">
            <!--资产块-->
            <div class="price-box my-box" id="my-price-block">
                <!--我的资产-->
                <div class="my-price" v-cloak="">
                    <div class="single-left">
                        <div>资产估值 <img v-if="isShow" src="image/zhengyan.png" class="pointer" @click="toggleShow" ><img v-else src="image/biyan.png" class="pointer" @click="toggleShow" ></div>
                        <div class="my-total-price">{{totalPriceCny}}</div>
                        <div class="my-usd">{{totalPriceUsd}}</div>
                    </div>
                    <div class="single-middle">
                        <div class="left-single"></div>
                        <div class="my-left">
                            <div>净投入本金<img src="image/help.png" @mouseEnter="showHelpMsg" @mouseLeave="hideHelpMsg" value="净投入本金=累计投入本金-累计提现金额"></div>
                            <div class="my-put-price">{{capitalCny}}</div>
                            <div class="my-usd">{{capitalUsd}}</div>
                        </div>
                        <div class="my-right">
                            <div>累计收入<img src="image/help.png" @mouseEnter="showHelpMsg" @mouseLeave="hideHelpMsg"  value="累计收益=资产估值-净投入本金"></div>
                            <div  class="my-income-price">{{sumProfitAmtCny}}</div>
                            <div class="my-usd">{{sumProfitAmtUsd}}</div>
                        </div>
                        <div class="help-msg hidden"></div>
                    </div>
                    <div class="single-right">
                        <div class="my-price-record   my-left">
                            <div class="my-price-btn my-price-btn-active  pointer" @click="setRecord">记一笔</div>
                            <p class="pointer" @click="toRecord">交易记录</p>
                        </div>
                        <div class="my-price-warn my-left">
                            <div class="my-price-btn  my-price-btn-active pointer" @click="setPriceWarn">设提醒</div>
                            <p class="pointer"  @click="toWarn">已设提醒</p>
                        </div>
                    </div>
                </div>

                <!--未登录状态个人中心-->
                <!--<div class="no-login-box">-->
                    <!--&lt;!&ndash;<div class="img-box"><img src="image/no-login-box.png"></div>&ndash;&gt;-->
                    <!--<div class="msg">通过记账可以帮助您跟踪资产变化哦</div>-->
                    <!--<div class="record-btn pointer" @click="toLogin">记一笔</div>-->
                <!--</div>-->
                <!--<div class="clearfix"></div>-->

                <!--饼图区-->
                <div class="my-pie" v-cloak="">
                    <div class="pie-desc">
                        <div id="pie-img"></div>
                        <div id="pie-text">
                            <p>总资产</p>
                            <p class="pie-text-num">{{ totalPriceCny!=0 ? totalPriceCny : 0 }}</p>
                        </div>
                    </div>
                    <div id="pie-list">
                        <div v-if="totalPriceCny == 0  || (totalPriceCnyBack == 0 && totalPriceCny == '***')">
                            <div class="no-login-pie-list">
                                暂无信息
                            </div>
                        </div>
                        <div class="pie-list-item" v-for="item in pieList">
                            <div class="pie-item-color" :style="{'background':item.color}"></div>
                            <div class="pie-item-name">{{ item.symbol }}</div>
                            <div class="pie-item-num">{{ item.rate }}</div>
                            <div class="pie-item-price">{{ item.flowNum }}</div>
                        </div>
                    </div>
                </div>

                <!--未登录状态个人中心-->
                <div class="no-login-box">
                    <div class="img-box"><img src="image/no-login-box.png"></div>
                    <div class="msg">通过记账可以帮助您跟踪资产变化哦</div>
                    <div class="record-btn pointer" @click="toLogin">记一笔</div>
                </div>
                <div class="clearfix"></div>

                <!--我的货币-->
                <div class="my-block" v-cloak="">
                    <div class="my-block-title">我的币种</div>
                    <table class="table currency-table">
                        <thead>
                        <tr>
                            <td>提醒</td>
                            <td>币种</td>
                            <td>实时价格</td>
                            <td>24H涨跌幅</td>
                            <td>数量</td>
                            <td>估值</td>
                        </tr>
                        </thead>
                        <tbody>
                            <tr  v-for="(item,index) in list" v-cloak="" class="login-table">
                                <td class="favorite" v-if="item.isWarn">
                                    <img src="image/tixingkai.png" class="pointer" @click="setWarn" :value="item.id" :flag="1" :price="item.price">
                                </td>
                                <td class="favorite" v-else>
                                    <img src="image/tixing.png"  class="pointer"  @click="setWarn" :value="item.id"  :flag="0"  :price="item.price">
                                </td>
                                <td class="bourse">
                                    <div >{{ item.zhName }}</div>
                                    <div >{{ item.symbol }}</div>
                                </td>
                                <td>{{ item.price }}</td>
                                <td :class="{'font-up':item.isUp,'font-down':!item.isUp }">{{ item.fluctuate }}</td>
                                <td>{{item.num }}</td>
                                <td class="text-right">{{ item.flowNum }}</td>
                            </tr>
                        </tbody>
                        <!--<tfoot>-->
                        <!--<tr>-->
                            <!--<td colspan="11" class="page-line">-->
                                <!--<nav aria-label="Page navigation">-->
                                    <!--&lt;!&ndash;标签翻页&ndash;&gt;-->
                                    <!--<ul class="pagination tab-page">-->
                                        <!--<li class="page-block page-prev" @click.prevent="toPage('market',$event)" :value="-1">-->
                                            <!--<a  aria-label="Previous" href="#">-->
                                                <!--&lt;!&ndash;<span aria-hidden="true">&laquo;</span>&ndash;&gt;-->
                                                <!--<img src="image/yema1.png">-->
                                            <!--</a>-->
                                        <!--</li>-->
                                        <!--<template v-for="(item,index) in market.totalNum ">-->
                                            <!--<template v-if="item == 1">-->
                                                <!--<li class="page-block page-num-btn page-active" @click="toPage('optional',$event)" :value="item"><a href="#">{{ item }}</a></li>-->
                                            <!--</template>-->
                                            <!--<template v-else>-->
                                                <!--<li class="page-block page-num-btn" @click="toPage('optional',$event)" :value="item"><a href="#">{{ item }}</a></li>-->
                                            <!--</template>-->
                                        <!--</template>-->
                                        <!--<li class="page-block page-next" @click="toPage('market',$event)" :value="0">-->
                                            <!--<a href="#" aria-label="Next">-->
                                                <!--&lt;!&ndash;<span aria-hidden="true">&raquo;</span>&ndash;&gt;-->
                                                <!--<img src="image/yema2.png">-->
                                            <!--</a>-->
                                        <!--</li>-->

                                        <!--&lt;!&ndash;页行数&ndash;&gt;-->
                                        <!--<li>-->
                                            <!--<select class="page-num" @change.self="setPageNum('market',$event)">-->
                                                <!--<option value="10">10条/页</option>-->
                                                <!--<option value="20">20条/页</option>-->
                                                <!--<option value="50">50条/页</option>-->
                                                <!--<option value="70">70条/页</option>-->
                                                <!--<option value="100">100条/页</option>-->
                                            <!--</select>-->
                                        <!--</li>-->
                                        <!--&lt;!&ndash;跳转翻页&ndash;&gt;-->
                                        <!--<li>-->
                                            <!--<div class="page-jump">跳转<input type="text" @keyup.enter="jumpPage('market',$event)">页</div>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                <!--</nav>-->


                            <!--</td>-->
                        <!--</tr>-->
                        <!--</tfoot>-->
                    </table>

                    <div class="no-login-table">暂无信息</div>
                </div>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div class="clearfix"></div>
<div id="footer">
    <footer-content></footer-content>
</div>

<!--设资产提醒-->
<div class="modal fade warnModal" id="warnPriceModal" tabindex="-1" role="dialog" v-cloak="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <button type="button" class="close" data-dismiss="modal"><img src="image/close.png"> </button>
                <p class="modal-title text-center font-size-14 padding-bottom-10">设置提醒</p>
            </div>
            <div class="modal-body">
                <div class="price"><span>总资产：</span>{{usd}} / {{cny}}</div>
                <div>
                    <div class="item">
                        <span class="title">资产上涨至 </span>
                        <input type="text" class="price-input" v-model="upNum" placeholder="请输入金额" v-on:input="checkInput">
                        <select :value="0" class="price-type" v-model="upPriceType">
                            <!--<option value="1">美元</option>-->
                            <!--<option value="0">元</option>-->
                            <option v-for="(item,index) in priceType" :value="index">{{item}}</option>

                        </select>
                        <!--<div class="title dropdown">-->
                            <!--<div class="dropdown-toggle pointer" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                                <!--<span class="title">{{ currName }}</span>-->
                                <!--<span class="caret"></span>-->
                            <!--</div>-->
                            <!--<ul class="dropdown-menu drop-box" id="drop-box" aria-labelledby="dropdownMenu1">-->
                                <!--<li v-for="(item,index) in exponent "  :value="index" class="drop-item" @click="getIndexValue">{{ item.indexName }}</li>-->
                            <!--</ul>-->
                        <!--</div>-->
                        <div class="warn-btn pointer" @click="addWarn" :value="1">添加提醒</div>
                    </div>
                    <div class="item">
                        <span class="title">资产下跌至 </span>
                        <input type="text" class="price-input" v-model="downNum"   placeholder="请输入金额" v-on:input="checkInput">
                        <select :value="0" class="price-type" v-model="downPriceType">
                            <!--<option value="1">美元</option>-->
                            <!--<option value="0">元</option>-->
                            <option v-for="(item,index) in priceType" :value="index">{{item}}</option>
                        </select>
                        <div class="warn-btn pointer" @click="addWarn" :value="2">添加提醒</div>
                    </div>
                </div>
                <div class="line-box">
                    <div class="line" v-for="(item,index) in list">
                        <span>价格{{ singleType[item.single]}}至 <span class="line-price">{{item.price}}</span> {{ priceType[item.priceType]}}时，提醒</span>
                        <div class="cancel pointer" @click="cancelWarn" :value="index">取消</div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:none;padding-top:0;"></div>
        </div>
    </div>
</div>
<!--设置币种提醒Modal-->
<div class="modal fade  warnModal" id="warnCurrencyModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <button type="button" class="close" data-dismiss="modal"><img src="image/close.png"> </button>
                <p class="modal-title text-center font-size-14 padding-bottom-10">设置提醒</p>
            </div>
            <div class="modal-body">
                <div class="price"><img :src="imgUrl"><span>{{ symbol }}价格：</span>$ {{usd}} / ¥ {{cny}}</div>
                <div>
                    <div class="item">
                        <span class="title">价格上涨至 </span>
                        <input type="text" class="price-input" v-model="upNum" placeholder="请输入金额" v-on:input="checkInput">
                        <select value="0" class="price-type" v-model="upPriceType">
                            <!--<option value="1">美元</option>-->
                            <!--<option value="0">元</option>-->
                            <option v-for="(item,index) in priceType" :value="index">{{item}}</option>
                        </select>
                        <div class="warn-btn pointer" @click="addWarn" :value="1">添加提醒</div>
                    </div>
                    <div class="item">
                        <span class="title">价格下跌至 </span>
                        <input type="text" class="price-input" v-model="downNum"   placeholder="请输入金额" v-on:input="checkInput">
                        <select value="1" class="price-type" v-model="downPriceType">
                            <!--<option value="1">美元</option>-->
                            <!--<option value="0">元</option>-->
                            <option v-for="(item,index) in priceType" :value="index">{{item}}</option>
                        </select>
                        <div class="warn-btn pointer" @click="addWarn" :value="2">添加提醒</div>
                    </div>
                </div>
                <div class="line-box">
                    <div class="line" v-for="(item,index) in list">
                        <span>价格{{ singleType[item.single]}}至 <span class="line-price">{{item.price}}</span> {{priceType[item.priceType]}}时，提醒</span>
                        <div class="cancel pointer" @click="cancelWarn" :value="index">取消</div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:none;padding-top:0;"></div>
        </div>
    </div>
</div>

<!--记一笔-->
<div class="modal fade" id="recordModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <button type="button" class="close" data-dismiss="modal"><img src="image/close.png"> </button>
                <p class="modal-title text-center font-size-14 padding-bottom-10">记一笔</p>
            </div>
            <div class="modal-body">
                <div class="item">
                    <span class="title">交易场所</span>
                    <select  class="select-box trans-place" v-model="transPlace">
                        <option value="0">场外交易</option>
                        <option value="1">场内交易</option>
                    </select>
                </div>
                <div class="item">
                    <span class="title">交易时间</span>
                    <input type="date" class="select-box trad-date" placeholder="请选择日期"  v-model="buyDate">
                </div>
                <div class="item">
                    <span class="title">交易类型</span>
                    <select value="0" class="select-box  trad-type" v-model="transCode">
                        <option value="0">买入</option>
                        <option value="1">卖出</option>
                    </select>
                </div>
                <div class="buy-info">
                    <div class="left buy-box">
                        <input  class="buy-name out-coin-symbol" type="text" placeholder="请输入币名" v-model="outSymbol" @focus="setSelectBox('0',$event)">
                        <div class="get-currency hidden">
                            <div class="get-currency-item" v-for="(item,index) in outItems" :value="index"  @click="selectCurrency('0',$event)">{{item.symbol+item.name}}</div>
                            <div class="no-currency-data hidden">暂无结果</div>
                        </div>
                        <div class="line"></div>
                        <input  class="buy-num out-coin-amt" type="text" placeholder="请输入数量" v-model="outCoinAmt">
                    </div>
                    <div class="middle"><img src="image/youjiantou.png"></div>
                    <div class="right  buy-box">
                        <input  class="buy-name in-coin-symbol" type="text" placeholder="请输入币名" v-model="inSymbol" @focus="setSelectBox('1',$event)">
                        <div class="get-currency hidden">
                            <div class="get-currency-item" v-for="(item,index) in inItems" :value="index"  @click="selectCurrency('1',$event)">{{item.symbol+item.name}}</div>
                            <div class="no-currency-data hidden">暂无结果</div>
                        </div>
                        <div class="line"></div>
                        <input  class="buy-num in-coin-amt" type="text" placeholder="请输入数量" v-model="inCoinAmt">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:none;padding-top:0;position:relative;">
                <div class="error-input-msg hidden">请输入相关数据</div>
                <div class="save pointer" :class="{'saveActive':isBtnActive}" @click="save">保存</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
